<template>
	<div class="iBanner">
		<div class="ibanner_main">
			<!--导航-->
			<tmpHeader :index='0' />
			<!--搜索框-->
			<div class="ibanner_header">
				<Button type="info" @click="navto" class="btn">
					<i class = "iconfont icon-add icon"></i>
				</Button>
				<div class="header_input">
					<Input v-model.trim="search" @on-keyup.enter='searchData' placeholder="请输入banner图名称查询" class="tit" clearable/>
					<Button type="primary"  icon="ios-search"  @click="searchData"></Button>
				</div>     
				<span class="tishi">(  提示：微信公众端最多显示5个序号靠前的banner。)</span>   
			</div>
			<Table stripe :columns="columns" :data="tbleList" ></Table>
			<!-- 分页-->
			<div class="page">
				<Page :total="bannerSize" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="pageChange"/>
			</div>
			<div  class="btn" @click="back">
				<Button>
					<i class = "iconfont icon-butongyi icon"></i>返回
				</Button>
			</div>	
		</div>
	</div>
</template>

<script>
import tmpHeader from "../tmpHeader";
import api from "@/api/commonApi";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
	components: {
		tmpHeader
	},
	data() {
		return {
			tbleList: [],
			search: "",
			arr: [],
			len: 10,
			appid:"",
			bannerSize: 0,
			pageNo: 1,
			pageSize: 10,
			columns:[
				{
					title:"排序",
					key:"sum",
					align:"center",
					width: 80
				},
				{
					title:"名称",
					key:"bannerName",
					align:"center",
					width: 200
				},
				{
					title:"轮播图",
					key:"imgUrl",
					align:"center",
					width: 100,
					render: (h, params) => {
						let avatar = params.row.imgUrl;
						let a = ''
						if(Boolean(avatar)) {
							a = h("img", {
								attrs: {
									src: avatar || '',
									style:
										"width:50px;height:30px;"
								}
							})
						} else {
							a = h("span", {
								attrs: {
									style:'color:gray'
								}
							},'暂无图片')
						}
						return a
					}
				},
				{
					title:"链接",
					key:"bannerUrl",
					align:"center",
				},
				{
					title:"显示",
					key:"enable",
					align:"center",
					width: 120
				},
				{
					title:"优先级",
					key:"showindex",
					align:"center",
					width: 120
				},
				{
					title:"设置",
					align:"center",
					width: 150,
					render: (h,params) => {
						let row = params.row;
						return [
							h('span',{
								style: {
									color: " #5362e1",
									width: "60px"
								},
								on: {
								click: () => {
									this.change(row)
								}
								}
							},'编辑')
						]
					}
				}
			],
			nick: ''
		};
	},
	created() {
		let iv = store.state.iv;
		let salt = store.state.salt;
		this.appid = aesUtils.decrypt(salt,iv,"wxAppid",localStorage.getItem("appid"))
		let breadList = [
			{ path: "/index", title: "首页" },
			{
				path: "/index/publicOperation/publicAddress/home",
				title: "公众号运营"
			}
		];
		this.$emit("changeBreadList", breadList);
	},
  	// 页面加载时获取数据
  	mounted() {
		let pageNo = this.$route.query.pageNo;
		this.nick = this.$route.params.nick;
		if (pageNo) {
			this.pageNo = Number(pageNo);
		}
		this.getData(this.pageNo);
	},
	methods: {
		// 根据输入的值获取不同的数据
		searchData () {
			this.pageNo = 1
			this.getData(1, this.search);
		},
		pageChange(index) {
			this.pageNo = index;
			if (this.search) {
				this.getData(1, this.search);
			} else {
				this.getData(index);
			}
		},
		// 添加banner图
		navto() {
			this.functionJS.queryNavgationTo(this,'/index/publicOperation/publicAddress/banner/add',{pageNo:this.pageNo,nick: this.$route.params.nick})
		},
		// 点击编辑
		change(item) {
			this.functionJS.paramsNavgationTo(this,'wxbannerEdit',{
				id: item.id,
				pageNo: this.pageNo,
				nick: this.$route.params.nick
			})
			this.functionJS.queryNavgationTo(this,'/index/publicOperation/publicAddress/banner/edit',{
				id: item.id,pageNo:this.pageNo,nick: this.$route.params.nick
			})
		},
		//获取公众号banner分页列表
		getData(pageNo, val) {
			let params = {
				pageNo,
				pageSize: this.pageSize,
				appid: this.appid
			};
			if (Boolean(val)) {
				params.searchKey = val.trim();
			}
			this.$axios.post(api.findWxBannerList, params).then(res => {
				if (res.data.code) {
					let ret = res.data.object;
					if(ret.records){
						ret.records.forEach((item,index) => {
							item.sum = this.addZeros(index)
							item.imgUrl = this.analysisImages(item.imgUrl)
							item.enable = item.enable == 1 ? "是" :"否" 
						})
						this.tbleList = ret.records;
						this.bannerSize = ret.total;
					} else {
						this.tbleList = []
					}    
				}
			});
		},
		analysisImages(json) {
			try {
				json = JSON.parse(json);
				return this.fileBaseUrl + json.fileName;
			} catch (error) {
				return "";
			}
		},
		back() {
			this.functionJS.queryNavgationTo(this,'/index/publicOperation/publicAddress/home',{pageNo:this.pageNo})
		},
	},
};
</script>

<style lang="less" scoped >
.iBanner {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .ibanner_main {
		display: flex;
		flex-direction: column;
		.ibanner_header {
			width: 100%;
			margin: 10px auto;
			display: flex;
			.tit {
				width: 200px;
			}
			.btn{
				margin-right: 5px;
			}
			.tishi {
				color: #ff9966;
				margin-top: 5px;
				margin-left: 20px;
			}
		}
		.page{
			text-align: center;
			margin: 20px 0;
		}
		.icon{
			margin-right: 5px;
			font-size: 14px;
		}
		.btn{
			text-align: center;
		}
    }
}
</style>